<template>
  <el-container>
    <el-container style="width: 17%;">
      <!-- <el-header style="width: 100%;">
        <el-input placeholder="请输入内容" size="medium" prefix-icon="el-icon-search" v-model="orgName"></el-input>
      </el-header> -->
      <el-main>
        <el-tree :data="treeNode" :props="defaultProps"></el-tree>
      </el-main>
    </el-container>
    <el-container style="width: 80%;">
      <el-main>
        <el-card class="box-card" style="margin-bottom: 30px;margin-top: 15px;">
          <div slot="header" class="clearfix">
            <span>Global配置</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="saveGlobal">保存</el-button>
          </div>
          <el-form ref="form" :model="globalConfig" label-width="80px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="应用服务">
                  <el-input v-model="globalConfig.baseUrl" placeholder="服务器IP，例:127.0.0.1"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" offset="2">
                <el-form-item label="服务端口">
                  <el-input v-model="globalConfig.port" placeholder="服务端口"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="卡云服务">
                  <el-input v-model="globalConfig.cloudUrl" placeholder="卡云服务IP，例:127.0.0.1"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" offset="2">
                <el-form-item label="卡云端口">
                  <el-input v-model="globalConfig.cloudPort" placeholder="服务端口"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <el-form-item label="C P U 卡">
                  <el-switch @change="isShowCpu" v-model="globalConfig.containCpuCard"></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="isCpu">
              <el-col :span="8">
                <el-form-item label="">
                  <el-input v-model="globalConfig.cpuUrl" placeholder="CPU卡云服务器IP，例:127.0.0.1"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" offset="2">
                <el-form-item label="卡云端口">
                  <el-input v-model="globalConfig.cpuPort" placeholder="服务端口"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="设备厂商">
                  <el-radio v-model="globalConfig.deviceType" label="CT">升腾</el-radio>
                  <el-radio v-model="globalConfig.deviceType" label="ZT">证通</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>分公司配置</span>
            <el-button style="float: right; padding: 3px 0" type="text">保存</el-button>
          </div>
            <el-form ref="form" :model="globalConfig" label-width="80px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="热线电话">
                    <el-input v-model="globalConfig.baseUrl" placeholder="POS主界面展示用户电话，例:12701"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" offset="2">
                  <el-form-item label="地区代码">
                    <el-input v-model="globalConfig.prot" placeholder="服务端口"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="显示商标">
                    <el-switch @change="isShowLogo" v-model="globalConfig.isShow"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="3" offset="2">
                  <el-form-item label="工业购气">
                    <el-switch @change="isShowLogo" v-model="globalConfig.isShow"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="3" offset=2>
                  <el-form-item label="线下写卡">
                    <el-switch @change="isShowLogo" v-model="globalConfig.isShow"></el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="小票抬头">
                    <el-input v-model="globalConfig.baseUrl" placeholder="服务器IP，例:127.0.0.1"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" offset="2">
                  <el-form-item label="小票信息">
                    <el-input v-model="globalConfig.prot" placeholder="服务端口"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'GlobalConfig',
  data () {
    return {
      treeNode: [
        {
          label: '一级 1'
        },
        {
          label: '一级 2'
        },
        {
          label: '一级 3'
        }],
      globalConfig: {
        baseUrl: '',
        port: '',
        cloudUrl: '',
        cloudPort: '',
        cpuUrl: '',
        cpuPort: '',
        deviceType: ''
      },
      isCpu: false,
      isLogo: false
    }
  },
  methods: {
    isShowCpu () {
      this.isCpu = !this.isCpu
    },
    isShowLogo () {
      this.isLogo = !this.isLogo
    },
    saveGlobal () {
      console.log(this.globalConfig)
      this.axios.post('/file/global', JSON.stringify(this.globalConfig))
    }
  },
  // 页面初始化
  mounted () {
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
  height: auto;
}
</style>
